<template>
 <div>
<el-main style="margin-top: -20px;height:600px; width: 800px; float:left; margin-left:320px">
    <div class="articles-area">
      <el-card style="text-align: left;">
        <span><h5><strong>&A 累计: {{ total }} 条</strong></h5></span>
        <el-divider></el-divider>
        <div v-for="question in questions" :key="question.uid">
             <el-avatar shape="square"
             style="border-radius: 5px; margin-right:150px;"
             :src="question.authorAvatar"></el-avatar>
          <div style="float:left;width:85%;height:20px; margin-left: 50px; margin-top:-49px;">
            <router-link target="_blank" class="article-link" :to="{path:'question/details',query:{id: question.id}}"><span style="font-size: 20px;"><strong>{{question.title}}</strong></span></router-link>
            <div>
              <span><i class="el-icon-view" ><strong style="margin-left:8px;">{{ question.views }}</strong> </i></span>
              <span  style="float:right;margin-top:0px; color:#67C23A;"><p>{{question.createTime | dateFmt('YYYY-MM-DD')}}</p></span>
              </div>
          </div>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
</el-main>
   <el-aside style="margin-left: 75%; height:550px;margin-top:40px">
     <div class="my-3 rounded">
                <p class="mb-0">
                    <a href="/admin/content/editorQuestion" class="btn btn-primary btn-sm btn-block" style="color: white">发布问题</a>
                </p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <p class="mb-0"> 社区公约: <br> 提问内容描述一定要清楚，回答尽量靠近主题，禁止瞎水社区，违者暂停账号使用! 申请分类可以在Q群@什锦 </p>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <a class="badge badge-pill badge-primary mr-1" href="http://jq.qq.com/?_wv=1027&k=mQ5DNjMf">Q群链接</a>
            </div>

            <div class="p-4 my-3 bg-white rounded">
                <h4 class="font-italic">友情链接</h4>
                <ol class="list-unstyled">
                    <li><a href="https://gitee.com/kuangstudy">Gitee</a></li>
                    <li><a href="https://space.bilibili.com/95256449">Bilibili</a></li>
                </ol>
            </div>
   </el-aside>
 </div>
</template>

<script>
 export default {
   name: 'Question',
   data () {
     return {
        questions: [],
        pageSize: 4,
        total: 0
     }
   },
   props: [],
   components: {

   },
   created () {},
   mounted () {
      this.loadQuestions()
    },
   methods: {
             loadQuestions () {
                var _this = this
                this.$axios.post('/api/api/question/' + this.pageSize + '/1').then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.questions = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              },
              handleCurrentChange (page) {
                var _this = this
                this.$axios.post('/api/api/question/' + this.pageSize + '/' + page).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.questions = resp.data.data.records
                    _this.total = resp.data.data.total
                  }
                })
              }
          }
 }
</script>

<style lang="css">
.articles-area {
    width: 780px;
    height: 510px;
    margin-left: auto;
    margin-right: auto;
  }

  .article-link {
    text-decoration: none;
    color: #606266;
  }

  .article-link:hover {
    color: #409EFF;
  }
</style>
